<template>
  <a-modal
    v-model:visible="modelVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    fullscreen
  >
    <template #title>
      <div style="width: 100%; text-align: left">试用期考核模板</div>
    </template>
    <div class="template-steps" style="width: 800px; margin: 0 auto">
      <div class="template-steps-item" style="width: 800px; margin: 0 auto">
        <a-steps changeable :current="current" @change="setCurrent" line-less>
          <a-step><template #icon> 1 </template>基本信息</a-step>
          <a-step><template #icon> 2 </template>选择考核工具</a-step>
          <a-step><template #icon> 3 </template>编辑考核指标</a-step>
          <a-step><template #icon> 4 </template>方案模板预览</a-step>
        </a-steps>
      </div>
    </div>
    <div style="margin-top: 60px">
      <!-- 基础信息 -->
      <AssessmentBaseInfo
        ref="baseInfoRef"
        v-show="current === 1"
        v-model:templateData="templateData"
      />
      <!-- 考核工具 -->
      <div v-show="current === 2">
        <AssessmentTools
          v-model:templateData="templateData"
          v-model:data="
            templateData.performanceAssessmentTemplateDimensionality
          "
        />
      </div>
      <!-- 考核指标 -->
      <div v-show="current === 3">
        <!-- {{ templateData }} -->
        <AssessmentIndex v-model:data="templateData" />
      </div>
      <!-- 预览 -->
      <div v-show="current === 4">
        <AssessmentTools
          v-model:templateData="templateData"
          v-model:data="
            templateData.performanceAssessmentTemplateDimensionality
          "
          :review="true"
        />
        <AssessmentIndex v-model:data="templateData" :review="true" />

        <!-- <AssessmentTemplateReview v-model:data="templateData" /> -->
      </div>
    </div>
    <template #footer>
      <div class="modal-footer">
        <a-space size="large" align="center">
          <a-button type="secondary" :disabled="current <= 1" @click="onPrev">
            <IconLeft />
            上一步
          </a-button>
          <a-button
            type="primary"
            v-show="current !== 4"
            :disabled="current >= 4"
            @click="onNext"
          >
            下一步
            <IconRight />
          </a-button>
          <a-button type="primary" v-show="current === 4" @click="save">
            保存 <IconRight />
          </a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import AssessmentBaseInfo from './AssessmentBaseInfo.vue';
import AssessmentTools from './AssessmentTools.vue';
import AssessmentIndex from './AssessmentIndex.vue';
import AssessmentTemplateReview from './AssessmentTemplateReview.vue';
import { PerformanceAppraisal } from '@/apis/management/performance/baseSetting/template/type';
import { useVModel } from '@vueuse/core';
const props = withDefaults(
  defineProps<{
    visible?: boolean;
    data: PerformanceAppraisal;
  }>(),
  {
    visible: false
  }
);
const emit = defineEmits(['update:visible', 'update:data', 'handleOk', 'save']);
const handleCancel = () => {
  emit('update:visible', false);
};
const handleOk = () => {
  emit('handleOk');
  handleCancel();
};
const modelVisible = ref(false);
const templateData = useVModel(props, 'data', emit);
const current = ref(1);
const reset = () => {
  current.value = 1;
};
watch(
  () => props.visible,
  (val) => {
    modelVisible.value = val;
    reset();
  },
  { deep: true }
);
const onPrev = () => {
  current.value = Math.max(1, current.value - 1);
};
const baseInfoRef = ref();
const onNext = async () => {
  const check = await baseInfoRef.value.validate();
  if (check) return;
  current.value = Math.min(4, current.value + 1);
};
const setCurrent = async (n: number) => {
  const check = await baseInfoRef.value.validate();
  if (check) return;
  current.value = n;
};
const save = async () => {
  emit('save', templateData.value);
  handleCancel();
};
</script>

<style lang="less" scoped>
.template-steps {
  // padding: 0 160px;
  // margin-bottom: 60px;
  border: 1px solid #eee;
  min-width: 700px;
  padding: 20px;
  border-radius: 5px;
  margin: 0 auto;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  &-item {
    width: 700px;
    margin: 0 auto;
  }
}
.modal-footer {
  display: flex;
  justify-content: center;
}
</style>
